<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>欢迎界面</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="css/main.css" media="all" />
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" media="all" />
    <link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.js" media="all" />
  </head>
  <body>
    <style type="text/css">
      legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: 'Microsoft YaHei', 'Helvetica Neue';
      }
      legend a {
        color: #666;
      }
      legend a:hover {
        text-decoration: none;
      }
      .layui-table {
        font-family: 'Microsoft YaHei', 'Helvetica Neue';
      }
    </style>
    <div class="x-body" style="background-color: #f3f3f3; margin: 0">
      <blockquote class="layui-elem-quote">欢迎使用智慧物业管理系统！<span class="f-14">v1.0</span> &nbsp;&nbsp;登录次数：520</blockquote>
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
          <section class="panel">
            <div class="symbol">
              <img src="./images/homeIcon1.png" width="71" alt="" />
            </div>
            <div class="value tab-menu" bind="1">
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数"> <span>总栋数</span></a>
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数">
                <h1>45</h1>
              </a>
            </div>
          </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
          <section class="panel">
            <div class="symbol">
              <img src="./images/homeIcon2.png" width="71" alt="" />
            </div>
            <div class="value tab-menu" bind="1">
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数"> <span>总户数</span></a>
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数">
                <h1>600</h1>
              </a>
            </div>
          </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
          <section class="panel">
            <div class="symbol">
              <img src="./images/homeIcon3.png" width="71" alt="" />
            </div>
            <div class="value tab-menu" bind="1">
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数"><span>总人数</span></a>
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数">
                <h1>8,310</h1>
              </a>
            </div>
          </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
          <section class="panel">
            <div class="symbol">
              <img src="./images/homeIcon4.png" width="71" alt="" />
            </div>
            <div class="value tab-menu" bind="1">
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量"> <span>租户数量</span></a>
              <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量">
                <h1>1,314</h1>
              </a>
            </div>
          </section>
        </div>
      </div>

      <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">信息统计</a></legend>
      </fieldset>

      <!--相关统计-->
      <div class="row">
        <div class="col-sm-4">
          <section class="panel">
            <div class="panel-heading">小区人数 <span style="position: absolute; right: 30px; top: 24px; font-size: 12px; color: #999; font-weight: 400">小区人数统计(人)</span></div>
            <div class="panel-body">
              <div class="echarts" id="area" style="height: 300px; height: 350px"></div>
            </div>
          </section>
        </div>
        <div class="col-sm-4">
          <section class="panel">
            <div class="panel-heading">
              投诉/满意度
              <div class="labelIndexBox"><span class="labelIndexleft">投诉(次)</span> <span class="labelIndexrit">业主满意度</span></div>
            </div>
            <div class="panel-body">
              <div class="echarts" id="main" style="height: 300px; height: 350px"></div>
            </div>
          </section>
        </div>
        <div class="col-sm-4">
          <section class="panel">
            <div class="panel-heading">小区停车位</div>
            <div class="panel-body">
              <div class="echarts" id="years" style="height: 300px; height: 350px"></div>
            </div>
          </section>
        </div>
        <div class="col-sm-4">
          <section class="panel">
            <div class="panel-heading">最新活动</div>
            <div class="panel-body" style="padding-top: 0px">
              <ul class="list-group clear-list m-t">
                <li class="list-group-item fist-item"><span class="float-right"> 09:00 </span> <span class="label label-success">1</span> 小区活动1</li>
                <li class="list-group-item"><span class="float-right"> 10:16 </span> <span class="label label-info">2</span> 小区活动2</li>
                <li class="list-group-item"><span class="float-right"> 08:22 </span> <span class="label label-primary">3</span> 小区活动3</li>
                <li class="list-group-item"><span class="float-right"> 11:06 </span> <span class="label label-warning">4</span> 小区活动4</li>
                <li class="list-group-item"><span class="float-right"> 12:00 </span> <span class="label label-warning">5</span> 小区活动5</li>
                <li class="list-group-item"><span class="float-right"> 08:22 </span> <span class="label label-warning">6</span> 小区活动6</li>
                <li class="list-group-item"><span class="float-right"> 11:06 </span> <span class="label label-warning">7</span> 小区活动7</li>
                <li class="list-group-item"><span class="float-right"> 12:00 </span> <span class="label label-warning">8</span> 小区活动8</li>
                <li class="list-group-item"><span class="float-right"> 11:06 </span> <span class="label label-warning">9</span> 小区活动9</li>
                <li class="list-group-item"><span class="float-right"> 12:00 </span> <span class="label label-warning">10</span> 小区活动10</li>
              </ul>
            </div>
          </section>
        </div>
        <div class="col-sm-4">
          <section class="panel">
            <div class="panel-heading">最新保修</div>
            <div class="panel-body" style="padding-top: 0px">
              <ul class="list-group clear-list m-t">
                <li class="list-group-item" style="border-top: none !important">
                  <span class="float-right"> 09:00 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-danger">1</span> D区垃圾桶更换
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 10:16 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-info">2</span> C区路灯维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 08:22 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-warning">3</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 11:06 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-default">4</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 12:00 &nbsp;<b style="color: #ff7700">未受理</b></span> <span class="label label-default">5</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 08:22 &nbsp;<b style="color: #ff7700">未受理</b></span> <span class="label label-default">6</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 11:06 &nbsp;<b style="color: #ff7700">未受理</b></span> <span class="label label-default">7</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 12:00 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-default">8</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 11:06 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-default">9</span> A区13楼摄像头维修
                </li>
                <li class="list-group-item">
                  <span class="float-right"> 12:00 &nbsp;<b style="color: #d68f49">已受理</b></span> <span class="label label-default">10</span> B区地下停车场排水系统检修
                </li>
              </ul>
            </div>
          </section>
        </div>
        <div class="col-sm-4">
          <section class="panel" style="min-height: 500px">
            <div class="panel-heading">系统信息</div>
            <div class="layui-card">
              <div class="layui-card-body">
                <table class="layui-table welcome" style="text-align: left !important; padding-left: 20px">
                  <thead>
                    <tr>
                      <th colspan="4" scope="col" style="text-align: left !important; padding-left: 20px">服务器信息</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>服务器计算机名</th>
                      <td><span id="lbServerName">http://127.0.0.1/</span></td>
                    </tr>
                    <tr>
                      <td>服务器IP地址</td>
                      <td>192.168.1.1</td>
                    </tr>
                    <tr>
                      <td>服务器域名</td>
                      <td>www.xxx.net</td>
                    </tr>
                    <tr>
                      <td>服务器端口</td>
                      <td>80</td>
                    </tr>
                    <tr>
                      <td>服务器IIS版本</td>
                      <td>Microsoft-IIS/6.0</td>
                    </tr>
                    <tr>
                      <td>本文件所在文件夹</td>
                      <td>D:\WebSite\</td>
                    </tr>
                    <tr>
                      <td>服务器操作系统</td>
                      <td>Microsoft Windows NT 5.2.3790 Service Pack 2</td>
                    </tr>
                    <tr>
                      <td>系统所在文件夹</td>
                      <td>C:\WINDOWS\system32</td>
                    </tr>
                    <tr>
                      <td>服务器脚本超时</td>
                      <td>30000秒</td>
                    </tr>
                    <!-- <tr>
                                <td>服务器的语言种类 </td>
                                <td>Chinese (People's Republic of China)</td>
                            </tr> -->
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        </div>
      </div>

      <script src="lib/layui/layui.js" charset="utf-8"></script>
      \
      <script src="js/jquery.min.js"></script>
      <script src="js/echarts.min.js"></script>

      <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))

        // 指定图表的配置项和数据

        let date = '2020-03-025'
        option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255, 255, 255, 1)',
            textStyle: {
              color: '#999',
            },
            extraCssText: 'box-shadow: 0 0 5px #ccc',
            formatter(params) {
              return `<div>${date} <br/>${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}%</div>`
            },
          },
          // legend: {
          //     color: ["#13C7F2", "#F9CE81"],
          //     data: ['投诉（次）', '业主满意度'],
          //     icon: 'rect',
          //     itemWidth: 18,
          //     itemHeight: 2,
          //     itemGap: 13,
          //     right: '4%',
          //     textStyle: {
          //         fontSize: 12,
          //         color: '#23b7e5'
          //     }
          // },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
              lineStyle: {
                color: '#9e9e9e',
              },
            },
            axisLabel: {
              color: '#9e9e9e',
              fontWeight: 'bold',
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              lineStyle: {
                color: '#D11F1F',
              },
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#eeeeee',
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#9e9e9e',
              },
            },
            axisLabel: {
              formatter: '{value}%',
              fontWeight: 'bold',
            },
            splitArea: {
              show: false,
            },
          },
          series: [
            {
              name: '投诉（次）',
              type: 'line',
              symbol: 'none',
              data: [{ value: 10, symbolSize: 10, symbol: 'emptyCircle' }, 20, 45, 15, { value: 90, symbolSize: 10, symbol: 'emptyCircle' }, 20, 10, 80, 50, { value: 90, symbolSize: 10, symbol: 'emptyCircle' }, 10, { value: 40, symbolSize: 10, symbol: 'emptyCircle' }],
              color: '#ff7700',
              lineStyle: {
                normal: {
                  width: 2.5,
                  color: '#ff7700',
                },
              },
              hoverAnimation: false,
              smooth: true,
            },
            {
              name: '业主满意度',
              type: 'line',
              symbol: 'none',
              data: [{ value: 20, symbolSize: 10, symbol: 'emptyCircle' }, 30, 70, 10, { value: 50, symbolSize: 10, symbol: 'emptyCircle' }, 90, 50, 20, 90, { value: 30, symbolSize: 10, symbol: 'emptyCircle' }, 50, { value: 90, symbolSize: 10, symbol: 'emptyCircle' }],
              color: '#ffd88d',
              lineStyle: {
                normal: {
                  width: 2.5,
                  color: '#ffd88d',
                },
              },
              hoverAnimation: false,
              smooth: true,
            },
          ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      </script>
      <script type="text/javascript">
        // 指定图表的配置项和数据
        var myChart = echarts.init(document.getElementById('area'))

        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255, 255, 255, 1)',
            textStyle: {
              color: '#999',
            },
            extraCssText: 'box-shadow: 0 0 5px #ccc',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          itemStyle: {
            normal: {
              //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
              color: function (params) {
                // build a color map as your need.
                var colorList = ['#FA9660', '#F8917E', '#FFD586', '#D68F49', '#DADADA']
                return colorList[params.dataIndex]
              },
              //以下为是否显示，显示位置和显示格式的设置了
              label: {
                show: true,
                position: 'top',
                formatter: '{b}\n{c}',
              },
            },
          },
          label: {
            normal: {
              show: true,
              formatter: '{c} ',
              textStyle: {
                fontSize: this.standSize / 150,
                color: '#999',
              },
            },
          },
          legend: {
            icon: 'circle',
            orient: 'vertical',
            itemWidth: 8,
            itemHeight: 8,
            right: 0,
            bottom: 0,
            data: ['A区', 'B区', 'C区', 'D区', 'E区'],
          },
          series: [
            {
              name: '小区租户人数',
              type: 'pie',
              radius: '55%',
              center: ['50%', '40%'],
              data: [
                { value: 6335, name: 'A区' },
                { value: 4310, name: 'B区' },
                { value: 2310, name: 'C区' },
                { value: 1010, name: 'D区' },
                { value: 810, name: 'E区' },
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        myChart.currentIndex = -1
        setInterval(function () {
          var dataLen = option.series[0].data.length
          /*console.log(dataLen);*/
          // 取消之前高亮的图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: myChart.currentIndex,
          })
          myChart.currentIndex = (myChart.currentIndex + 1) % dataLen
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: myChart.currentIndex,
          })
        }, 2000)

        // 使用刚指定的配置项和数据显示图表。
        /*myChart.setOption(option);*/
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      </script>
      <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('years'))
        //var myChart = echarts.init(document.getElementById('chart2'));
        var ydata = [
          {
            name: 'A区车位',
            value: 18,
          },
          {
            name: 'B区车位',
            value: 16,
          },
          {
            name: 'C区车位',
            value: 15,
          },
          {
            name: 'D区车位',
            value: 14,
          },
          {
            name: 'E区车位',
            value: 10,
          },
        ]
        var color = ['#FA9660', '#DADADA', '#FFD586', '#F8917E', '#D68F49']
        var xdata = ['A区车位', 'B区车位', 'C区车位', 'D区车位', 'E区车位']

        option = {
          /*backgroundColor: "rgba(255,255,255,1)",*/
          color: color,
          legend: {
            icon: 'circle',
            x: 'right',
            right: '10',
            bottom: '0',
            data: xdata,
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#000',
            },
            /*itemGap: 16,*/
            /*formatter:function(name){
                  var oa = option.series[0].data;
                  var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
                  for(var i = 0; i < option.series[0].data.length; i++){
                      if(name==oa[i].name){
                          return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                      }
                  }
                }*/
            formatter: function (name) {
              return '' + name
            },
          },
          series: [
            {
              type: 'pie',
              clockwise: false, //饼图的扇区是否是顺时针排布
              minAngle: 2, //最小的扇区角度（0 ~ 360）
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                //图形样式
                normal: {
                  borderColor: '#ffffff',
                  borderWidth: 1,
                },
              },

              label: {
                normal: {
                  show: false,
                  position: 'center',
                  formatter: '{b}\n{c} ({d}%)',
                  rich: {
                    text: {
                      color: '#fff',
                      fontSize: 14,
                      align: 'center',
                      verticalAlign: 'middle',
                      padding: 8,
                    },
                    value: {
                      color: '#8693F3',
                      fontSize: 24,
                      align: 'center',
                      verticalAlign: 'middle',
                    },
                  },
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 24,
                  },
                },
              },
              data: ydata,
            },
          ],
        }
        myChart.setOption(option)
        myChart.currentIndex = -1

        setInterval(function () {
          var dataLen = option.series[0].data.length
          // 取消之前高亮的图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: myChart.currentIndex,
          })
          myChart.currentIndex = (myChart.currentIndex + 1) % dataLen
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: myChart.currentIndex,
          })
        }, 2000)

        // 使用刚指定的配置项和数据显示图表。
        /*myChart.setOption(option);*/
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      </script>
    </div>
    <div class="layui-footer footer footer-demo">
      <div class="layui-main">
        <p>
          <a href="/"> Copyright ©2017 17sucai.com All Rights Reserved. </a>
        </p>
      </div>
    </div>
  </body>
</html>
